<template>
  <div>
    <van-nav-bar class="sfaaf" title="设置" @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" color="#000" size="20" />
      </template>
    </van-nav-bar>

    <div>
      <van-cell title="用户名" :value="uname" @click="modifyName" />
      <van-popup
        v-model="showname"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <div class="determine">
          <input
            type="text"
            v-model="uname"
            placeholder="点击请修改用户名"
            v-focus="true"
          />
        </div>
        <div class="onbtn">
          <span @click="setName">确定</span>
        </div>
      </van-popup>
      <van-cell title="手机号" :value="idphone" />

      <van-cell value="关于我们" @click="aboutAs" />
      <van-cell value="隐私政策" @click="Privacy" />
      <van-cell value="新版更新" @click="verupDate" />
      <van-cell value="请我吃西瓜~" @click="showReward" />
    </div>
    <van-button
      type="primary"
      color="#3d85c6"
      block
      class="btn"
      @click="logOut()"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { Dialog } from "vant";
import Vue from "vue";
import { Toast } from "vant";
import { mapMutations, mapState } from "vuex";

Vue.use(Toast);
export default {
  mounted() {
    const url = "v1/users/information";
    const params = `phone=${this.idphone}`;
    this.axios.post(url, params).then((res) => {
      this.updataName(res.data.name);
      this.uname = this.username;
      this.getUid(res.data.uid);
    });
  },
  data() {
    return {
      reward: false,
      uname: "",
      showname: false,
      showphone: false,
    };
  },
  computed: {
    ...mapState(["idphone", "username", "uid"]),
  },
  directives: {
    focus: {
      inserted: function (el, { value }) {
        console.log(el, { value });
        if (value) {
          el.focus();
        }
      },
    },
  },
  methods: {
    ...mapMutations(["signOut", "updataName", "getUid"]),
    onClickLeft() {
      this.$router.push("/mine");
    },
    modifyName() {
      this.showname = true;
    },

    aboutAs() {
      Dialog.alert({
        message: "我们打卡六人组",
        width: "280px",
      }).then(() => {
        // on close
      });
    },
    Privacy() {
      Dialog.alert({
        title: "承诺",
        message: "我们会保证您的隐私安全,绝不会贩卖您的隐私,请您相信我们",
        width: "280px",
      }).then(() => {
        // on close
      });
    },
    verupDate() {
      Toast({
        message: "已是最新版本",
        position: "bottom",
      });
    },
    showReward() {
      Dialog.alert({
        messageAlign: "left",
        title: "谢谢你",
        message:
          "为了你的钱包，我决定不吃西瓜了，谢谢你的心意，我们心领了。我们将提供更加人性化的功能提高让你拥有更好的体验，祝你幸福~",
        theme: "round-button",
        width: "280px",
        confirmButtonColor: "#ff9900",
      }).then(() => {
        // on close
      });
    },
    setName() {
      this.showname = false;
      const params1 = `username=${this.uname}&phone=${this.idphone}`;
      this.axios
        .post("v1/users/msg", params1)
        .then((res) => {
          console.log(res);
        });
      const params2 = `username=${this.uname}&cid=${this.uid}`;

      this.axios
        .post("v1/users/dmsg", params2)
        .then((res) => {
          console.log(res);
        });
    },
    logOut() {
      this.getUid(null)
      this.updataName(null)
      this.signOut(null);
      this.$router.replace({ path: '/mine' })
    },
  },
};
</script>

<style scoped>
.btn {
  margin-top: 20px;
}
van-field {
  text-align: center;
}
.determine {
  width: 300px;
  margin: 0 auto;
  margin-top: 10%;
}
.determine input {
  text-align: center;
  width: 300px;
  border: 0px;
  font-size: 20px;
}
.onbtn {
  width: 200px;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  color: rgb(30, 134, 219);
}
</style>